<template>
  <div style="position: relative">
<!--    <div v-if="rowData.children.length" @click="openChildren" class="open">{{ showChildren?'-':'+' }}</div>-->
    <div v-if="rowData.name !== '营业利润'" class="operation flex flex-row">
      <div class="bto flex a-item j-content" @click="addRow" >+</div>
      <div class="bto flex a-item j-content" @click="reduceRow" v-if="no !== 1">-</div>
<!--      <div v-if="!rowData.children.length && no !== 1" @click="setFormula(rowData)">配置公式</div>-->
    </div>
    <div :class="{'no1':no === 1}" class="reportRow flex flex-row">
      <div class="td fl2 flex a-item ">
        <div v-if="no === 1" :style="{'padding-left':(no-1)*20+'px'}">
          {{ rowData.name }}
        </div>
        <div v-else style="width: 100%;height: 100%" :style="{'padding-left':(no-1)*20+'px'}">
          <input placeholder="请输入名称"  @dblclick="setFormula(rowData)" v-model="rowData.name"></input>
        </div>
      </div>
      <div class="td fl1 flex a-item j-content">{{ rowData.rowIndex }}</div>
      <div class="td fl1 flex a-item j-content"></div>
      <div class="td fl1 flex a-item j-content"></div>
    </div>
    <profitStatementRow @setFormula="setFormula" @reduceIndex="reduceIndex"  :row-data="item" v-for="(item,index) in rowData.children" :row-index="index" :no="no+1"></profitStatementRow>
  </div>
</template>

<script>

import JDialog from '../../../../../../components/jDialog/jDialog'
export default {
  name: 'profitStatementRow',
  components: { JDialog },
  props:{
    rowData:{
      type: Object,
      default: null
    },
    no:{
      type: Number,
      default: 1
    },
    rowIndex:Number
  },
  created() {
    if(this.no < 2)this.showChildren = true
  },
  data(){
    return{
      showChildren:false,
      row:{name:null,children:[]}
    }
  },
  methods:{
    openChildren(){
      this.showChildren = !this.showChildren
    },
    reduceRow(){
      if(this.rowData.children.length){
        this.$confirm('此操作将直接删除此条数据及下级所有数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('reduceIndex',this.rowIndex)}
        ).catch(e=>{})
      }else {
        this.$emit('reduceIndex',this.rowIndex)
      }

    },
    reduceIndex(i){
      console.log(i)
      this.rowData.children.splice(i,1)
    },
    addRow(){
      if (!this.rowData.name){
        this.$message.error('请先输入科目名称')
        return
      }
      if (this.rowData.formula && this.rowData.formula.length){
        this.$message.error('该科目已配置公式，无法新增下级')
        return
      }
      if(this.rowData.children){
        this.rowData.children.push({name:null,children:[]})
      }else {
        this.rowData.children = [{name:null,children:[]}]
      }
      this.$forceUpdate()
    },
    setFormula(e){
      if (!e.name){
        this.$message.error('请先输入科目名称')
        return
      }
      if (e.children.length){
        this.$message.error('该科目有下级科目无法配置，请删除下级科目')
        return
      }
      this.$emit('setFormula',e)
    }
  }
}
</script>

<style lang="scss" scoped>
.reportRow{
 .td{
   border: 1px solid #000000;
    overflow: hidden;
   height: 30px;
 }
}
.no1{
  background-color: #BDD7EE;
}
.open{
  position: absolute;
  margin-left: -20px;
  font-size: 20px;
  cursor: pointer;
}
input{
  border: none;
}
.operation{
  position: absolute;
  margin-left: 100%;
  width: 120px;
  font-size: 20px;
  color: blue;
  div{
    margin-right: 5px;
    cursor: pointer;
  }
}
input{
  border: none;
  width: 100%;
  height: 100%;
  outline:none;
}
//.bto{
//  background-color: #6ce26c;
//  color: #ffffff;
//  width: 20px;
//  height: 20px;
//  border-radius: 20px;
//  font-size: 20px;
//}
</style>
